@charset "UTF-8";
body{
  // background: red;
}
@test_width: 300px;
.box{
  width: @test_width;
  height: @test_width;
  background-color:yellow;
  .border;
}

.border{
  border: 5px solid pink;
}

.border_02(@border_width){
  border: @border_width solid yellow;
}
.test_hunhe{
  .border_02(30px);
}
.border_radius(@radius:5px){
  border-radius:@radius;
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
}
.radius_test{
  width:100px;
  height:40px;
  background-color: green;
  .border_radius();
}
.sanjiao{
  width: 0;
  height: 0;
  overflow: hidden;
  border-width:10px;
  //朝上
  // border-color: transparent transparent red transparent;
  // border-style: dashed dashed solid dashed;
  //朝下
  border-color: red transparent transparent transparent;
  border-style:solid;
}
//匹配模式  类似于

.triangle(top,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: @c transparent transparent  transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: transparent @c transparent  transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: transparent transparent  transparent @c;
  border-style: dashed dashed solid dashed;
}
.triangle(@_,@w:5px,@c:#ccc){
  width: 0;
  height: 0;
  overflow: hidden;
}

.sanjiao{
  .triangle(top,100px);
}

//匹配模式-定位
.pos(r){
  position: relative;
}
.pos(a){
  position: absolute;
}
.pos(f){
  position: fix;
}
.pipei{
  width: 200px;
  height: 200px;
  background-color: green;
  .pos(f);
}
//运算
@test_01:100px;

.box_02{
  height: 100px;
  width:(@test_01 - 20)*5;
  background: #ff0;
}

//嵌套

//@arguments
.border_arg(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}

.test_arguments{
  .border_arg();
}

//避免编译
.test_03{
  width: ~'calc(300px - 30px)';
}

//important
.test_important{
  .border_radius() !important;
}













.xxxx{}
